<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <cellbox middle class="student-manage">
          <cell-item>
            <heading grade='1'>学员管理</heading>
          </cell-item>
          <cell-item class="tr small weak">
            <el-button @click="handleAddStudent" class="orange-btn">新增学员</el-button>  
          </cell-item>
        </cellbox>
      <div class="search-box">
        <el-form v-bind="getFormProps()" label-width="90px">
          <el-form-item label="姓名：">
            <el-input v-model="query.name" placeholder="请输入姓名" class="search-input"></el-input>
          </el-form-item>
          <el-form-item label="年龄范围：" class="age-box">
            <el-input-number v-model="ageFrom" :max="99" class="age-input" />
            <span>~</span>
            <el-input-number v-model="ageTo" :max="99" :min="query.ageFrom" class="age-input" />
          </el-form-item>
          <el-button type="primary" class="search-btn" native-type="submit">搜索</el-button>
        </el-form>
      </div>
      <div class="student-table">
        <el-table
          :data="train_student_list.list" 
          tooltip-effect="dark" 
          stripe
          style="width: 100%" 
          @sort-change="handelOrder">
          <el-table-column 
            prop="name"
            label="姓名" 
            width="100" 
            sortable 
            align="center">
            <template scope="scope">
              <span class="link" @click="handleDetail(scope.$index, scope.row)">
                {{ scope.row.name }}
              </span>
            </template>
          </el-table-column>
          <el-table-column 
            label="性别" 
            width="80" 
            align="center">
            <template scope="scope">
              <span>{{scope.row.sex === 1? '男': '女'}}</span>  
            </template>
          </el-table-column>
          <el-table-column 
            prop="age" 
            label="年龄" 
            width="90" 
            sortable 
            align="center">
            <template scope="scope">
              {{scope.row.age ? scope.row.age : '未知'}}
            </template>
          </el-table-column>
          <el-table-column 
            prop="nationalityName" 
            label="国籍" 
            width="70" 
            align="center">
          </el-table-column>
          </el-table-column>
          <el-table-column
            prop="firstSignupDate"
            label="首次报名"
            sortable 
            align="center">
            <template scope="scope">
              <div>
                <div style="line-height:18px">{{scope.row.sources === 0 ? '平台报名' : '后台录入'}}</div>
                <div style="line-height:18px">{{new Date(scope.row.firstSignupDate).format('yyyy.MM.dd')}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column  
            label="在上课程"
            :show-overflow-tooltip="true"
            align="center">
            <template scope="scope">
              {{ scope.row.courseInfo }}
            </template>   
          </el-table-column>
          <el-table-column
            label="课程数"
            align="center">
            <template scope="scope">
              <!-- <el-popover trigger="hover" placement="bottom" v-if="scope.row.courseNum != 0">
                <p>{{ scope.row.courseInfo }}</p>
                <div slot="reference" class="name-wrapper">
                  <span class="link">{{ scope.row.courseNum }}</span>
                </div>
              </el-popover>
              <span v-else>{{ scope.row.courseNum }}</span> -->
              {{ scope.row.courseNum }}
            </template>
          </el-table-column>
          <el-table-column 
            prop="operate" 
            label="操作" 
            width="100" 
            align="center">
            <template scope="scope">
              <p><el-button size="small" @click="handleEdit(scope.$index, scope.row)"  type="link">编辑</el-button></p>
              <p><el-button size="small" @click="handleVacate(scope.$index, scope.row)" v-if="scope.row.courseNum" type="link">请假</el-button></p>
              <p><el-button size="small" @click="handleCancelVacate(scope.$index, scope.row)" v-if="scope.row.needCancelLeave===1" type="link">撤销请假</el-button></p>
              <p><el-button size="small" @click="handleRepair(scope.$index, scope.row)" v-if="scope.row.needMakeup ===1" type="link">补课</el-button></p>
            </template>
          </el-table-column>
        </el-table>
         <el-pagination
          v-bind="getPaginationProps(train_student_list)"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          >
        </el-pagination> 
      </div>
      <vacate :isVacate="isVacate" :studentInfo="studentInfo" v-if="isClose" v-model="isClose" @success="handleSuccessList" />
      <repair :makeup="makeup" v-if="isRepair" v-model="isRepair" @success="handleSuccessList" />
    </div>
  </div>  
</template>

<script>
import { pagingList } from 'utils/mixins'
import vacate from './components/Vacate'
import repair from './components/Repair'
import { mapGetters } from 'vuex'
export default {
  mixins: [pagingList],
  components: {
    vacate,
    repair
  },
  data () {
    return {
      isVacate: false, // 请假or撤销请假
      isClose: false,
      studentInfo: {},
      repair: false, // 补课
      isRepair: false,
      makeup: {},
      loading: false,
      name: '',
      query: this.getQuery(),
      cancelVacate: true
    }
  },
  computed: {
    ...mapGetters({
      train_student_list: 'train_student_list' // 学员管理列表数据
    }),
    ageFrom: {
      set (value) {
        this.query.ageFrom = value || null
        this.ageTo = this.query.ageFrom > this.query.ageTo ? this.query.ageFrom : this.query.ageTo
      },
      get () {
        return this.query.ageFrom
      }
    },
    ageTo: {
      set (value) {
        this.query.ageTo = Number(value) || null
      },
      get () {
        return this.query.ageTo
      }
    }
  },
  methods: {
    handleAddStudent () { // 新增
      this.$router.push({name: 'addStudent'})
    },
    fetch (query) {
      this.$store.dispatch('train_student_list', query)
    },
    handelOrder (column, prop, order) {
      let query = Object.assign({sort: prop}, this.query)
      this.$store.dispatch('train_student_list', query)
    },
    handleDetail (index, row) {
      this.$router.push('/training/student/detail/' + row.id)
    },
    handleEdit (index, row) { // 编辑
      this.$router.push({name: 'editStudent', query: {id: row.id}})
    },
    handleVacate (index, row) { // 展示请假
      this.studentInfo = row
      this.isClose = true
      this.isVacate = true
    },
    handleCancelVacate (index, row) { // 展示撤销请假
      this.studentInfo = row
      this.isClose = true
      this.isVacate = false
    },
    handleRepair (index, row) { // 展示补课
      this.makeup = row
      this.repair = true
      this.isRepair = true
    },
    handleSuccessList () {
      this.fetch(this.query)
    }
  }
}
</script>

<style lang="scss">
.content {
  .student-table 
    tbody {
      tr {
      font-size: 12px;
    }
    .sing-up {
      display: block;
    }
  }
  .age-box {
    .age-input {
      width: 100px;
      .el-input {
        width: 100px;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.content {
  .student-manage {
    margin-top: -25px;
  }
  .search-box {
    .form-search {
      .el-form-item {
        display: inline-block;
      }
      .el-input {
        width: 160px;
      }
      .search-input {
        width: 250px;
      }
      .search-btn {
        margin-left: 15px;
      }
    }
  }
  .student-table {
    margin-top:30px;
  }
}

</style>
